<template>
  <div>
    <section>
      <h1 class="title">
        <span class="iconfont iconjingdongzhongchou"></span>募资情况
      </h1>
      <div id="total" style="width: 100%;height: 160px"></div>
    </section>
    <section>
      <h1 class="title"><span class="iconfont iconhuiyuan"></span>会员情况</h1>
      <div id="member" style="width: 100%;height: 160px"></div>
      <div id="todayMember" style="width: 100%;height: 200px"></div>
    </section>
    <section>
      <h1 class="title">
        <span class="iconfont iconchongzhi"></span>当日充值提现
      </h1>
      <div id="money" style="width: 100%;height: 160px"></div>
    </section>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "echarts",
  props: {
    info: {
      type: Object
    }
  },
  data() {
    return {
      readyPromise: null,
      readyPromiseRS: null,
      readyPromiseRJ: null
    };
  },
  methods: {
    drawPie(id, len, ser, text) {
      var colorList = ["#fd7400", "#afa3f5"];
      this.readyPromise.then(() => {
        let myChart = echarts.init(document.getElementById(id));
        let option = {
          title: {
            text: text,
            x: "center",
            textStyle: {
              fontSize: 14
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{b}: {c} ({d}%)",
            backgroundColor: "#FFFFFF",
            borderWidth: 1,
            borderColor: "#92C9FF",
            textStyle: {
              color: "#646769",
              fontFamily: "PingFangSC-Medium",
              fontSize: 11
            }
          },
          legend: {
            show: false,
            orient: "horizontal",
            x: "right",
            data: len
          },
          series: [
            {
              itemStyle: {
                normal: {
                  color: function(params) {
                    return colorList[params.dataIndex];
                  }
                }
              },
              label: {
                formatter: "{b}: {c}"
              },
              name: "信息",
              type: "pie",
              radius: ["30%", "40%"],
              labelLine: {
                normal: {
                  lineStyle: {
                    color: "#235894"
                  }
                }
              },
              data: ser
            }
          ]
        };
        myChart.setOption(option);
      });
    },
    drawLine(id) {
      this.readyPromise.then(() => {
        let myChart = echarts.init(document.getElementById(id));
        let data = [this.info.dayLogin, this.info.dayAuth];
        let dataShadow = [];
        let dataAxis = [
          "当日注册数量" + this.info.dayLogin,
          "当日实名数量" + this.info.dayAuth
        ];
        let yMax =
          this.info.dayLogin > this.info.dayAuth
            ? this.info.dayLogin
            : this.info.dayAuth;
        for (var i = 0; i < data.length; i++) {
          dataShadow.push(yMax);
        }
        let option = {
          title: {
            text: "今日会员",
            x: "center",
            textStyle: {
              fontSize: 14
            }
          },
          xAxis: {
            data: dataAxis,
            axisLabel: {
              inside: true,
              textStyle: {
                color: "#3a3351"
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            z: 10
          },
          yAxis: {
            // axisLine: {
            //   show: false
            // },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#afa3f5"
              }
            }
          },
          dataZoom: [
            {
              type: "inside"
            }
          ],
          series: [
            {
              // For shadow
              type: "bar",
              itemStyle: {
                normal: { color: "rgba(0,0,0,0.05)" }
              },
              barGap: "-100%",
              barCategoryGap: "40%",
              data: dataShadow,
              animation: false
            },
            {
              type: "bar",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#fdaa0b" },
                    { offset: 0.5, color: "#fd9111" },
                    { offset: 1, color: "#fd7400" }
                  ])
                }
              },
              data: data
            }
          ]
        };
        myChart.setOption(option);
      });
    }
  },
  created() {
    this.readyPromise = new Promise((resolve, reject) => {
      this.readyPromiseRS = resolve;
      this.readyPromiseRJ = reject;
    });
    this.drawPie(
      "total",
      ["募资", "当日募资"],
      [
        {
          value: this.info.allMoney - this.info.dayMoney,
          name: "募资"
        },
        {
          value: this.info.dayMoney,
          name: "当日募资"
        }
      ],
      "平台总募资:" + this.info.allMoney
    );
    this.drawPie(
      "money",
      ["充值金额", "提现金额"],
      [
        {
          value: this.info.recharge,
          name: "充值金额"
        },
        {
          value: this.info.getcash,
          name: "提现金额"
        }
      ]
    );
    this.drawPie(
      "member",
      ["未实名数量", "实名数量"],
      [
        {
          value: this.info.alluser - this.info.authUser,
          name: "未实名数量"
        },
        {
          value: this.info.authUser,
          name: "实名数量"
        }
      ],
      "平台会员总数:" + this.info.alluser
    );
    this.drawLine("todayMember");
  },
  mounted() {
    this.readyPromiseRS();
  }
};
</script>
<style scoped lang="stylus">
.title{
  font-size 32px
  background white
  line-height 70px
  padding 0 24px
  text-align center
  font-weight bold
  color color-primary
  margin 0
  .iconfont{
    display inline-block
    margin-right 20px
  }
}
section{
  div{
    padding 24px 0
  }
}
</style>
